<template>
    <div class="form-container">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <!-- 标题 -->
        <el-form-item label="题目标题" prop="title">
          <el-input v-model="ruleForm.title" placeholder="请输入题目标题"></el-input>
        </el-form-item>
  
        <!-- 标签 -->
        <el-form-item label="标签" prop="tag">
          <el-select v-model="ruleForm.tag" multiple placeholder="请选择标签">
            <el-option label="标签1" value="tag1">贪心</el-option>
            <el-option label="标签2" value="tag2">动态规划</el-option>
            <el-option label="标签3" value="tag3">数据结构</el-option>
          </el-select>
        </el-form-item>
  
        <!-- 难度 -->
        <el-form-item label="难度" prop="rank">
          <el-input-number v-model="ruleForm.rank" :min="0" placeholder="请输入难度"></el-input-number>
        </el-form-item>
  
        <!-- 题面描述 -->
        <el-form-item label="题面描述" prop="dc">
          <el-input
            v-model="ruleForm.dc"
            type="textarea"
            placeholder="请输入题面描述"
          ></el-input>
        </el-form-item>
  
        <!-- 输入样例和输出样例 -->
        <div v-for="(sample, index) in ruleForm.input.data" :key="index" class="sample-group">
          <el-form-item :label="`输入样例 ${index + 1}`" :prop="`input.data.${index}`">
            <el-input v-model="ruleForm.input.data[index]" placeholder="请输入样例数据"></el-input>
          </el-form-item>
          <el-form-item :label="`输出样例 ${index + 1}`" :prop="`output.data.${index}`">
            <el-input v-model="ruleForm.output.data[index]" placeholder="请输入样例数据"></el-input>
          </el-form-item>
          <el-button
            type="danger"
            icon="el-icon-minus"
            circle
            @click="removeSample(index)"
          ></el-button>
        </div>
        <el-button type="success" @click="addSample">添加样例</el-button>
  
        <!-- 扩展描述 -->
        <el-form-item label="扩展描述" prop="exDc">
          <el-input
            v-model="ruleForm.exDc"
            type="textarea"
            placeholder="请输入扩展描述"
          ></el-input>
        </el-form-item>
  
        <!-- 题目限制 -->
        <el-form-item label="题目限制" prop="limit">
          <el-input v-model="ruleForm.limit" placeholder="请输入题目限制"></el-input>
        </el-form-item>
  
        <!-- 比赛 -->
        <el-form-item label="比赛" prop="contest">
          <el-input v-model="ruleForm.contest" placeholder="请输入比赛"></el-input>
        </el-form-item>
  
        <!-- 提交按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script lang="ts">
  import { reactive, ref } from 'vue';
  import type { FormInstance, FormRules } from 'element-plus';
  import axios from 'axios';
  import querystring from 'querystring';
//   import router from '../router';
  
  export default {
    setup() {
      const ruleFormRef = ref<FormInstance>();
  
      const validTitle = (rule: any, value: string, callback: any) => {
        if (value === '') {
          callback(new Error('请输入题目标题'));
        } else {
          callback();
        }
      };
  
      const validTag = (rule: any, value: string, callback: any) => {
        if (value.length === 0) {
          callback(new Error('请输入标签'));
        } else {
          callback();
        }
      };
  
      const validRank = (rule: any, value: number, callback: any) => {
        if (value === 0 || value % 100 !== 0) {
          callback(new Error('难度必须是100的倍数'));
        } else {
          callback();
        }
      };
  
      const validDc = (rule: any, value: string, callback: any) => {
        if (value === '') {
          callback(new Error('请输入题面描述'));
        } else {
          callback();
        }
      };

      const validIOputcnt = (rule: any, value: number, callback: any) => {
        if (value === 0) {
          callback(new Error('请输入样例数据'));
        } else {
          callback();
        }
      };
  
      const validIOputData = (rule: any, value: string, callback: any) => {
        if (value === '') {
          callback(new Error('请输入样例数据'));
        } else {
          callback();
        }
      };
  
      const validLimit = (rule: any, value: number, callback: any) => {
        if (value === 0) {
          callback(new Error('请输入题目限制'));
        } else {
          callback();
        }
      };
  
      const validContest = (rule: any, value: string, callback: any) => {
        if (value === '') {
          callback(new Error('请输入比赛'));
        } else {
          callback();
        }
      };
  
      const ruleForm = reactive({
        title: '',
        tag: [],
        rank: 0,
        dc: '',
        input: {
          cnt: 0,
          data: [''],
        },
        output: {
          cnt: 0,
          data: [''],
        },
        exDc: '',
        limit: '',
        contest: '',
      });
  
      const rules = reactive<FormRules<typeof ruleForm>>({
        title: [{ validator: validTitle, trigger: 'blur' }],
        tag: [{ validator: validTag, trigger: 'blur' }],
        rank: [{ validator: validRank, trigger: 'blur' }],
        dc: [{ validator: validDc, trigger: 'blur' }],
        input: [{ validator: validIOputcnt, trigger: 'blur' },{ validator: validIOputData, trigger: 'blur' }],
        output: [{ validator: validIOputcnt, trigger: 'blur' },{ validator: validIOputData, trigger: 'blur' }],
        exDc: [{ validator: validDc, trigger: 'blur' }],
        limit: [{ validator: validLimit, trigger: 'blur' },{ validator: validLimit, trigger: 'blur' }],
        contest: [{ validator: validContest, trigger: 'blur' }],
      });
  
      const addSample = () => {
        ruleForm.input.data.push('');
        ruleForm.output.data.push('');
        ruleForm.input.cnt = ruleForm.input.data.length;
        ruleForm.output.cnt = ruleForm.output.data.length;
      };
  
      const removeSample = (index: number) => {
        ruleForm.input.data.splice(index, 1);
        ruleForm.output.data.splice(index, 1);
        ruleForm.input.cnt = ruleForm.input.data.length;
        ruleForm.output.cnt = ruleForm.output.data.length;
      };
  
      const submitForm = () => {
        ruleFormRef.value?.validate((valid) => {
          if (valid) {
            console.log('提交的表单数据:', ruleForm);
            // 这里可以调用 API 提交表单数据
            axios.post('/api/problem/create', querystring.stringify(ruleForm),{
                headers: {
                    // 'Content-Type': 'application/x-www-form-urlencoded', // 如果需要指定内容类型
                    'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJxaWQiOiIxMTExMTExMTExIiwicW5hbWUiOiJSQ2VsbHMiLCJleHAiOjE3NDI2NzQ4MTMsIm5iZiI6MTc0MjU4ODQxMywiaWF0IjoxNzQyNTg4NDEzfQ.gw2-ULFQXjT0vrvwh1Fh29N7l5LJllq6kpU7n-veURo', // 替换为你的固定 token
                }
            }).then((response) => {
              console.log('提交成功:', response.data);
            //   router.push('/success');
            }).catch((error) => {
              console.error('提交失败:', error);
            });
          } else {
            console.error('表单验证失败');
          }
        });
      };
  
      const resetForm = () => {
        ruleFormRef.value?.resetFields();
      };
  
      return {
        ruleFormRef,
        ruleForm,
        rules,
        addSample,
        removeSample,
        submitForm,
        resetForm,
      };
    },
  };
  </script>
  
  <style scoped>
  .sample-group {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
  }
  
  .sample-group .el-form-item {
    margin-right: 8px;
  }
  </style>